<template>
    <view>
        <view
            class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center"
          >
            <view
              class="justify__author__info"
              @click="
                navigateToFn({
                  url: '/circleMixinPages/blogger_other?id=' + item.user_id,
                  checkLogin: false,
                })
              "
            >
              <view class="tn-flex tn-flex-row-center">
                <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                  <view class="">
                    <tn-avatar
                      shape="circle"
                      :src="item.userAvatar"
                      :bg="item.bg"
                      size="lg"
                    >
                    </tn-avatar>
                  </view>
                  <view class="tn-padding-right tn-text-ellipsis">
                    <view class="tn-padding-right tn-padding-left-sm">
                      <text
                        class="tn-text-bold"
                        :class="{ 'tn-color-red': item.vip === 1 }"
                        >{{ item.userName }}</text
                      >

                      <text
                        class="tn-icon-sex tn-color-gray"
                        v-if="item.sex == 0"
                      ></text>
                      <text
                        class="tn-icon-sex-female tn-color-purplered"
                        v-if="item.sex == 2"
                      ></text>
                      <text
                        class="tn-icon-sex-male tn-color-blue"
                        v-if="item.sex == 1"
                      ></text>
                      <text class="dk-lv" v-if="item.vip == 0 && configInfo.is_lv"
                        >LV {{ item.lv }}</text
                      >
                      <text class="dk-vip" v-if="item.vip == 1"
                        ><text
                          class="tn-icon-vip"
                          style="font-size: 14px; margin-left: -5px"
                        ></text
                        >贵族</text
                      >
                    </view>
                    <view
                      class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray tn-text-ellipsis"
                      style="font-size: 12px"
                    >
                      {{ item.shengri }} {{ item.new_city }} {{ item.xueli }}
                      {{ item.zhiwei }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view
              v-if="item.manage == 1 || item.ziji == 1"
              class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center"
              @click="chaozuo(item, tieziliindex, item.ziji)"
            >
              <text
                class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"
              ></text>
            </view>
          </view>

          <view v-if="item.price_is > 0" @click="dakai(item)">
            <tn-button width="100%" height="100rpx" margin="10rpx 0">
              付费帖子，您需要支付
              <text class="tn-color-red">{{ item.price_is }}</text>
              {{ configInfo.site_moneyname }}
            </tn-button>
          </view>
          <block>
            <!-- 内容太多疲劳了-->
            <view
              v-if="item.content"
              class="blogger__content dk-top-10 tn-text-content"
              @click="dakai(item)"
            >
              <view class="blogger__content__data tn-text-ellipsis-3">
                <text>{{ zhuantihang(item.content) }}</text>
              </view>
            </view>

            <view
              v-if="item.price_is == 0"
              class="blogger__content dk-top-10 tn-text-content"
              @click="dakai(item, tieziliindex)"
            >
              <view
                @click.stop="bofang(item.voc, tieziliindex)"
                style="width: 60%"
              >
                <tn-button
                  backgroundColor="#00FFC6"
                  padding="40rpx 0"
                  width="100%"
                  shadow
                  fontBold
                  v-if="item.voc"
                >
                  <view
                    class="voice-line-wrap"
                    style="
                      --line-height: 15px;
                      --line-start-color: royalblue;
                      --line-end-color: indianred;
                    "
                  >
                    <block v-if="item.isplay">
                      <view class="voice-line one"></view>
                      <view class="voice-line two"></view>
                      <view class="voice-line three"></view>
                      <view class="voice-line four"></view>
                      <view class="voice-line five"></view>
                      <view class="voice-line six"></view>
                      <view class="voice-line seven"></view>
                      <view class="voice-line six"></view>
                      <view class="voice-line five"></view>
                      <view class="voice-line four"></view>
                      <view class="voice-line three"></view>
                      <view class="voice-line two"></view>
                      <view class="voice-line one"></view>
                    </block>
                    <block v-else>
                      <view class="tn-icon-sound"></view>
                    </block>
                    <text class="tn-color-black" style="margin-left: 15px"
                      >{{ item.vocscend }} ''</text
                    >
                  </view>
                </tn-button>
              </view>
              <view @click="dakai(item)">
                <!-- #ifdef APP-PLUS -->
                <view class="" style="position: relative" v-if="item.vod_img">
                  <image
                    :src="item.vod_img"
                    mode="aspectFill"
                    style="width: 50%"
                    @click="dakai(item)"
                  ></image>
                  <view
                    class="video-img tn-flex"
                    style="
                      position: absolute;
                      border-radius: 2500px;
                      background-color: rgb(13, 13, 13, 0.3);
                      top: 40%;
                      left: 20%;
                      width: 40px;
                      height: 40px;
                    "
                    @click.stop="playVideo(item.vod)"
                  >
                    <view
                      class="tn-icon-play-fill tn-color-white"
                      style="font-size: 30px; margin-left: 6px; margin-top: -3px"
                    ></view>
                  </view>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP||H5 -->
                <view
                  style="width: 100%"
                  class=""
                  v-if="item.vod_img"
                  @click="dakai(item)"
                >
                  <video
                    controls
                    id="myvideo"
                    style="width: 100%"
                    enable-play-gesture="true"
                    :poster="item.vod_img"
                    :src="item.vod"
                    @fullscreenchange="screenChange"
                  ></video>
                </view>
                <!-- #endif -->
              </view>
            </view>

            <block v-if="item.mainImage">
              <view
                v-if="[1, 2, 4].indexOf(item.mainImage.length) != -1"
                class="tn-padding-top-xs"
                @click="dakai(item)"
              >
                <image
                  v-for="(image_item, image_index) in item.mainImage"
                  :key="image_index"
                  class="blogger__main-image"
                  :class="{
                    fufei: item.price_is > 0,
                    'blogger__main-image--1 tn-margin-bottom-sm':
                      item.mainImage.length === 1,
                    'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm':
                      item.mainImage.length === 2 || item.mainImage.length === 4,
                  }"
                  :src="image_item"
                  mode="aspectFill"
                  @click.stop="
                    tupian(image_index, item.mainImage, item.price_is, item.id)
                  "
                ></image>
              </view>
              <view v-else class="tn-padding-top-xs" @click="dakai(item)">
                <tn-grid hoverClass="none" :col="3">
                  <block
                    v-for="(image_item, image_index) in item.mainImage"
                    :key="image_index"
                  >
                    <!-- #ifndef MP -->
                    <tn-grid-item style="width: 30%; margin: 10rpx">
                      <image
                        class="blogger__main-image blogger__main-image--3"
                        :src="image_item"
                        mode="aspectFill"
                        :class="{
                          fufei: item.price_is > 0,
                        }"
                        @click.stop="
                          tupian(
                            image_index,
                            item.mainImage,
                            item.price_is,
                            item.id
                          )
                        "
                      ></image>
                    </tn-grid-item>
                    <!-- #endif-->
                    <!-- #ifdef MP -->
                    <tn-grid-item style="width: 30%; margin: 10rpx">
                      <image
                        class="blogger__main-image blogger__main-image--3"
                        :src="image_item"
                        mode="aspectFill"
                        :class="{
                          fufei: item.price_is > 0,
                        }"
                        @click.stop="
                          tupian(
                            image_index,
                            item.mainImage,
                            item.price_is,
                            item.id
                          )
                        "
                      ></image>
                    </tn-grid-item>
                    <!-- #endif-->
                  </block>
                </tn-grid>
              </view>
              <view
                class="tn-flex tn-margin-top tn-flex-row-left"
                v-if="item.label.length > 0"
              >
                <view>
                  <view
                    v-for="(label_item, label_index) in item.label"
                    :key="label_index"
                    class="blogger__desc__labeldd tn-float-left tn-round tn-text-sm tn-text-bold"
                    style="
                      padding: 3px 15px;
                      background-color: #efefef !important;
                      margin-right: 5px;
                    "
                    @click="
                      navigateToFn({
                        url: '/circleMixinPages/tags_list?id=' + label_item.id,
                        checkLogin: false,
                      })
                    "
                  >
                    <text
                      class="tn-icon-topics"
                      style="font-size: 30rpx; color: rgb(134, 78, 255)"
                    ></text>
                    <text class="tn-text-df" style="color: rgb(134, 78, 255)">{{
                      label_item.title
                    }}</text>
                  </view>
                </view>
              </view>
            </block>

            <!-- 内容太多疲劳了-->
            <view
              v-if="item.lat > 0"
              class="blogger__content dk-top-10 tn-text-content"
            >
              <view
                @click="selectAddressFn(item)"
                class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold tn-text-ellipsis tn-color-blue"
              >
                <text
                  class="tn-icon-location tn-round tn-text-df tn-text-bold"
                  style="
                    padding: 5px 8px;
                    font-size: 12px;
                    color: #747474;
                    background: #ececec;
                  "
                  >{{ item.address }}</text
                >
              </view>
            </view>
          </block>

          <view
            class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs"
          >
            <view class="justify-content-item tn-color-gray tn-text-center">
              <view class="">
                <text
                  class="blogger__count-icon tn-icon-message"
                  style="font-size: 20px"
                  @click="dakai(item)"
                ></text>
                <text class="tn-padding-right" @click="dakai(item)">
                  {{ $t.number.formatNumberAddPriceUnit(item.commentCount) }}
                </text>
                <text
                  v-if="item.is_like"
                  class="blogger__count-icon tn-icon-praise-fill tn-color-red"
                  @click="dianzantiezi(item, tieziliindex)"
                  style="font-size: 20px"
                ></text>
                <text
                  v-else
                  class="blogger__count-icon tn-icon-praise"
                  @click="dianzantiezi(item, tieziliindex)"
                  style="font-size: 20px"
                ></text>

                <text class="">
                  {{ $t.number.formatNumberAddPriceUnit(item.likeCount) }}</text
                >
              </view>
            </view>
            <view
              class="justify-content-item tn-flex tn-flex-col-center tn-text-sm tn-color-gray"
            >
              {{ timeChange(item.date) }}
              <text v-if="item.city">发布于{{ item.city }}</text>
            </view>
          </view>
    </view>
</template>